Author: emsanator

$html = 'Hello there this is image 1 <img src="https://www.example.com/XXX1.jpg" width="653" height="340" alt="xxx" title="xxx"> !!

And Now you can see image number 2 <img src="https://www.example.com/XXX2.jpg" width="653" height="340" alt="xxx" title="xxx"> yep.';

    $dom = new DOMDocument;
    $dom->loadHTML($html);
    $imgs = $dom->getElementsByTagName('img');
    $imgURLs = [];
    foreach ($imgs as $img) {
        if (!$img->hasAttribute('src')) {
            continue;
        }
        $imgURLs[] = $img->getAttribute('src');
    }
    // print_r($imgURLs);

Result:

Array ( [0] => http://www.example.com/XXX1.jpg [1] => http://www.example.com/XXX2.jpg ) 

I want to change the image links in the text as follows;

{#img='new_Image_1.jpg', alt='Image of Article'}

So:

Hello there this is image 1 {#img='new_Image_1.jpg', alt='Image of Article'} !!
And Now you can see image number 2 {#img='new_Image_2.jpg', alt='Image of Article'} yep.

I could do this if there was only one image link in the text, but I don't know how to change it because there are multiple image links.

Usually, there are 2 images. Available in articles with 1 image. Therefore, an exact number is unfortunately not possible.

How can I do that?

Hi, I'm trying to create a theme-compatible category system, but I missed some points.

For example;

category_name_women_clothing and category_name_women_bag, etc.. are supposed to be collapsible, but I was not successful in this.

How can I make a model that opens and closes sub-categories, where am I missing?

This is what it looks like right now - Image

PHP Code:

function createTree($array, $currentParent, $currLevel = 0, $prevLevel = -1)
    {

        foreach ($array as $categoryId => $category) {
            if ($currentParent == $category['parent_id']) {
                if ($currLevel > $prevLevel) echo "<ul id='" . $category['parent_id'] . "' class='collapse show' data-bs-parent='#" . $category['parent_id'] . "'>";
                if ($currLevel < $prevLevel) {

                }
                if ($currLevel == $prevLevel) {

                }
                echo '<li><a class="widget-link" href="#' . $category['parent_id'] . '" ' . (($currLevel == 0) ? 'data-bs-toggle="collapse"' : '') . '>' . $category['name'] . '</a>';
                if ($currLevel > $prevLevel) {
                    $prevLevel = $currLevel;
                }
                $currLevel++;
                createTree($array, $categoryId, $currLevel, $prevLevel);
                $currLevel--;
            }
        }
        if ($currLevel == $prevLevel) echo "</li></ul>";
    }

Sample HTML:

<div class="widget widget-categories">
  <h3 class="widget-title">Collapsible categories</h3>
  <ul id="categories">
    <li>
      <a class="widget-link" href="#clothing" data-bs-toggle="collapse">
        Clothing
        <small class="text-muted ps-1 ms-2">235</small>
      </a>
      <ul class="collapse show" id="clothing" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Blazers & Suits</a></li>
        <li><a class="widget-link" href="#">Cardigans</a></li>
        <li><a class="widget-link" href="#">Dresses</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#shoes" data-bs-toggle="collapse">
        Shoes
        <small class="text-muted ps-1 ms-2">210</small>
      </a>
      <ul class="collapse" id="shoes" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Athletic shoes</a></li>
        <li><a class="widget-link" href="#">Balerinas & Flats</a></li>
        <li><a class="widget-link" href="#">Boots</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#electronics" data-bs-toggle="collapse">
        Electronics
        <small class="text-muted ps-1 ms-2">197</small>
      </a>
      <ul class="collapse" id="electronics" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Computers & Accessories</a></li>
        <li><a class="widget-link" href="#">TV, Video & Audio</a></li>
        <li><a class="widget-link" href="#">Smartphones & Tablets</a></li>
      </ul>
    </li>
    <li>
      <a class="widget-link collapsed" href="#accessories" data-bs-toggle="collapse">
        Accessories
        <small class="text-muted ps-1 ms-2">124</small>
      </a>
      <ul class="collapse" id="accessories" data-bs-parent="#categories">
        <li><a class="widget-link" href="#">Bags</a></li>
        <li><a class="widget-link" href="#">Belts</a></li>
        <li><a class="widget-link" href="#">Hats</a></li>
      </ul>
    </li>
  </ul>
</div>

Database:

| cID | cPID (parent ID)  | cSlug | cName                                   |
|-----|-------------------|-------|-----------------------------------------|
| 1   | 0                 |       | category_name_women                  |
| 2   | 0                 |       | category_name_men                    |
| 3   | 0                 |       | category_name_baby                   |
| 4   | 0                 |       | category_name_women_clothing|
| 5   | 1                 |       | category_name_women_accessories |
| 6   | 1                 |       | category_name_women_bag |
| 7   | 1                 |       | category_name_women_shoes   |
| 8   | 6                 |       | category_name_women_bag_name_handbag|
| 9   | 6                 |       | category_name_women_bag_name_hanger_bag |
| 10  | 6                 |       | category_name_women_bag_name_backpack   |
| 11  | 4                 |       | category_name_women_clothing_bottoms|
| 12  | 4                 |       | category_name_women_clothing_dresses|

Thank you!

I create the product's information and variations with Ajax, but it is not possible to click on the variations, what could be the reason?

<form>
    <div class="form-group">
        <p class="mb-5">
            Size: <strong><span id="sizeCaption">--</span> US</strong>
        </p>
        <div id="item_variation_size" class="mb-2"></div>
        <div class="form-row mb-7">
            <div class="col-12 col-lg">
                <button type="button" class="btn btn-block btn-dark mb-2 addToCart">Add to Cart <i class="fe fe-shopping-cart ml-2"></i></button>
            </div>
        </div>
    </div>
</form>

Ajax:

(async () => {
    const itemData = await submitSender(null, "getItemData", itemID, "post");
    if (itemData) {
        if (itemData.item.v) {
            for (var i = 0; i < itemData.item.v.variationData.sizes.length; i++) {
                document.getElementById("item_variation_size").innerHTML +=
                    '<div class="custom-control custom-control-inline custom-control-size mb-2"><input type="radio" class="custom-control-input" name="sizeRadio" id="sizeRadio_' +
                    itemData.item.v.variationData.sizes +
                    '" value="' +
                    itemData.item.v.variationData.sizes[i] +
                    '" data-toggle="form-caption" data-target="#sizeCaption"><label class="custom-control-label" for="sizeRadio_' +
                    itemData.item.v.variationData.sizes[i] +
                    '">' +
                    itemData.item.v.variationData.sizes[i] +
                    "</label>";
            }
        }
    }
})();

Could data-toggle="form-caption" data-target="#sizeCaption" be the reason why the variation uploaded and created with Ajax doesn't work?