Copy Products between Store Page

Description

• copy products with tag: armchair from store page (with url: /capsules/paros) to product category page (with url: /collection/armchairs)
• and copy products with tag: sofa from store page (with url: /capsules/paros) to product category page (with url: /collection/sofas)
• buy me a coffee

#1. Install Code

#1.1. First, you need to assign products with corresponding tag: armchair & sofa from first store page. In my example, it is store: /capsules/paros)

Something like this

or like this

or this

#1.2. Next, use this code to Code Injection > Footer

<!-- 07.26c27v3 Copy Products between Store Page -->
<script>
window.CopyProductsConfig = {
  mappings: [
    { sourceUrl: "/capsules/paros", tagClass: "tag-armchair", targetPath: "/collection/armchairs" },
    { sourceUrl: "/capsules/paros", tagClass: "tag-sofa", targetPath: "/collection/sofas" },
    { sourceUrl: "/capsules/paros", tagClass: "tag-desk", targetPath: "/collection/desks" }
  ]
};
</script>
<script>
(function () {
  "use strict";
  var CFG = window.CopyProductsConfig;
  if (!CFG || !Array.isArray(CFG.mappings)) return;

  function normalizePath(p) {
    if (!p) return "";
    return p.replace(/[?#].*$/, "").replace(/\/+$/, "");
  }

  function loadImage(img) {
    if (!img) return;
    var base = img.getAttribute("data-src") || img.getAttribute("data-image") || img.getAttribute("src");
    if (!base) return;
    var url = base.split("?")[0] + "?format=1000w";
    img.removeAttribute("srcset");
    img.removeAttribute("sizes");
    img.removeAttribute("data-loader");
    img.removeAttribute("loading");
    img.setAttribute("src", url);
    img.setAttribute("data-load", "true");
    img.classList.add("loaded");
    img.style.setProperty("display", "block");
  }

  function loadImages(node) {
    loadImage(node.querySelector(".grid-image-cover") || node.querySelector("img"));
    loadImage(node.querySelector(".grid-image-hover"));
  }

  function appendItems(container, items, tagClass) {
    var existing = {};
    container.querySelectorAll(".product-list-item").forEach(function (el) {
      var id = el.getAttribute("data-product-id");
      if (id) existing[id] = true;
    });
    var added = 0;
    items.forEach(function (item) {
      var id = item.getAttribute("data-product-id");
      if (id && existing[id]) return;
      var node = document.importNode(item, true);
      node.setAttribute("data-copied-tag", tagClass);
      node.classList.add("is-loaded");
      loadImages(node);
      container.appendChild(node);
      if (id) existing[id] = true;
      added += 1;
    });
    return added;
  }

  function updateCount(root) {
    var countEl = root.querySelector(".product-list-result-count");
    if (!countEl) return;
    var total = root.querySelectorAll(".product-list-item").length;
    countEl.textContent = total + (total === 1 ? " Result" : " Results");
  }

  function processMapping(map) {
    var root = document.querySelector(".product-list");
    var container = root && root.querySelector(".product-list-layout-container");
    if (!container) return;
    if (container.querySelector('[data-copied-tag="' + map.tagClass + '"]')) return;
    fetch(map.sourceUrl, { credentials: "same-origin" })
      .then(function (res) {
        if (!res.ok) throw new Error("Fetch failed: " + res.status);
        return res.text();
      })
      .then(function (html) {
        var doc = new DOMParser().parseFromString(html, "text/html");
        var items = Array.prototype.slice.call(
          doc.querySelectorAll(".product-list-item." + map.tagClass)
        );
        if (!items.length) return;
        if (container.querySelector('[data-copied-tag="' + map.tagClass + '"]')) return;
        var added = appendItems(container, items, map.tagClass);
        if (added) updateCount(root);
      })
      .catch(function () {});
  }

  function run() {
    if (document.body && document.body.classList.contains("sqs-edit-mode-active")) return;
    var path = normalizePath(window.location.pathname);
    CFG.mappings.forEach(function (map) {
      if (normalizePath(map.targetPath) !== path) return;
      processMapping(map);
    });
  }

  if (document.readyState === "complete" || document.readyState === "interactive") {
    run();
  }
  window.addEventListener("load", run);
  window.addEventListener("mercury:load", run);
})();
</script>

#1.3. Remember to update these

mappings: [
   { sourceUrl: "/capsules/paros", tagClass: "tag-armchair", targetPath: "/collection/armchairs" },
   { sourceUrl: "/capsules/paros", tagClass: "tag-sofa", targetPath: "/collection/sofas" },
   { sourceUrl: "/capsules/paros", tagClass: "tag-desk", targetPath: "/collection/desks" }
 ]