Elements Manipulate

Please see Elements Manipulate.

This is a base effect and gives you the ability to append, prepend, or replace one selector with another. You might use it for an effect like moving a common block from the footer to particular pages.

I have updated my cited code.

From the changes...

• add source selector copy feature

I have updated my cited code.

From the changes...

• support for callbacks

Here is an example settings that moves a Video block from Additional Info above the quantity.

  <script type="application/vnd.twc.em">
  
    {
    
      /*
      
        the format of each data structure is a selector source and destination,
        an action, and optional callback
        
        following is an example data structure. copy the example data structure
        below and paste after the example data structure. remove the forward
        slash asterisk and asterisk forward slash lines from before and after
        the example data structure. repeat for as many as many elements as you
        need to manipulate. this has been done once initially
        
        */
        
      /* "[ enter selector source here between double quotes replacing square brackets ]" : {
      
        "selectorDestination" : "[ enter selector destination here between double quotes replacing square brackets ]",
        
        // action value is after, append, before, prepend or replace
        
        "action" : "append",
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
        
        // sourceCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        "sourceCopy" : false,
        
        // callback is optional, use when you want to manipulate the structure
        // of the source element. replace undefined with the name of your custom
        // function
        //
        // your callback must accept and return a JavaScript object
        
        "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
        
        }, */
        
      "#block-yui_3_17_2_1_1728593423043_10015" : {
      
        "selectorDestination" : ".ProductItem-quantity-add-to-cart",
        
        // action value is after, append, before, prepend or replace
        
        "action" : "before",
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
        
        // sourceCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        "sourceCopy" : false,
        
        // callback is optional, use when you want to manipulate the structure
        // of the source element. replace undefined with the name of your custom
        // function
        //
        // your callback must accept and return a JavaScript object
        
        "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
        
        },
        
      }
      
    </script>

This only handles one vid for one product. If you need to do multiple products then you'd need different settings.

Hi @creedon Thanks so much for getting back to me. I'm not particularly knowledgable of this kind of code and am trying to make sense of it, in terms of whether I need to add anything to it? I tried pasting the entire lot into the header injection, but nothing happened. Sorry if I'm being dumb.

The plan is to have a single looping video on all product pages, and I was hoping this could be achieved using a single piece of code - but in reality am I going to have to add code per video?

Thanks again.

Settings Example : Additional Info First Row Video Block Before Quantity

If you have a video for every product that you want to appear before Quantity. Add a Video block as the first row of the Additional Info layout.

<script type="application/vnd.twc.em">

  {
  
    /*
    
      the format of each data structure is a selector source and destination,
      an action, and optional callback
      
      following is an example data structure. copy the example data structure
      below and paste after the example data structure. remove the forward
      slash asterisk and asterisk forward slash lines from before and after
      the example data structure. repeat for as many as many elements as you
      need to manipulate. this has been done once initially
      
      */
      
    /* "[ enter selector source here between double quotes replacing square brackets ]" : {
    
      "selectorDestination" : "[ enter selector destination here between double quotes replacing square brackets ]",
      
      // action value is after, append, before, prepend or replace
      
      "action" : "append",
      
      // selectorParentDestination is optional, use when you want to first
      // find a selector destination but then work up the ancestor hierarchy
      // to manipulate it
      
      "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
      
      // sourceCopy when true will make a copy of the source element and use
      // it instead of the actual selectorSource. value is false or true
      
      "sourceCopy" : false,
      
      // callback is optional, use when you want to manipulate the structure
      // of the source element. replace undefined with the name of your custom
      // function
      //
      // your callback must accept and return a JavaScript object
      
      "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
      
      }, */
      
    ".ProductItem .ProductItem-additional .sqs-layout > .sqs-row:first-child > .sqs-col-12 > .sqs-block-video" : {
    
      "selectorDestination" : ".ProductItem-quantity-add-to-cart",
      
      // action value is after, append, before, prepend or replace
      
      "action" : "before",
      
      // selectorParentDestination is optional, use when you want to first
      // find a selector destination but then work up the ancestor hierarchy
      // to manipulate it
      
      "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
      
      // sourceCopy when true will make a copy of the source element and use
      // it instead of the actual selectorSource. value is false or true
      
      "sourceCopy" : false,
      
      // callback is optional, use when you want to manipulate the structure
      // of the source element. replace undefined with the name of your custom
      // function
      //
      // your callback must accept and return a JavaScript object
      
      "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
      
      },
      
    }
    
  </script>