Implementation Guides
      Back to home
      1. Nextech AR Help Center
      2. ARitize3D
      3. Implementation Guides

      Magento 2 Embed Button Implementation

      Overview

      ARitize 3D's QuickAR enables online retailers to offer Augmented Reality (AR) and 3D product views to shoppers with minimal technical and operational investment. To add the ARitize 3D tag into the Magento 2 installation, a new Block and Widget can be created from the admin panel.

       

      Tag Details

      Access to Magento 2 admin panel is required to add the AR and/or 3D buttons onto the product pages.

      By following these instructions, the following buttons will be added to your product page:

      blobid0.png

      Code for ARitize Buttons

      Step 1:

      Go to your Magento 2 Block Editor.

      1. Click Content in the left menu.
      2. Click Blocks in the fly-out menu beneath Elements.

      blobid1.png

      Step 2:

      1. Click the Add New Block button on the top right.

      blobid2.png

      2. Paste the code below into the editor of the New Block that is being created.

      3. Set the Block Title and Identifier to ARitize_Buttons.

      4. Click Save when you are done.

      blobid3.png

       

      Insertion Process

      The process of inserting the JavaScript tag is easy.

      1. Find your personalized code and client key by following this guide. - Follow the guide above if you would like to include buttons for ARitize Configurator and ARitize Decorator. If you are interested in learning more, please contact us.
      2. Paste the code below into your tag management system where you want the buttons to appear on your website.

      Code to Paste:

      <script type="text/javascript">

       (function (sc, d, t, u, k, s, p) {

       if (sc.QUICK_AR_INIT) return; sc['QUICK_AR_INIT'] = { key: k };

       s = d.createElement(t), p = d.getElementsByTagName('head')[0]; s.src = u; p.appendChild(s);

       })(window, document, 'script', 'https://cdn-quick-ar.threedy.ai/latest/threedy.js', 'REPLACE_WITH_CLIENT_KEY');

      </script>

      <div id="threedy-container" data-threedy-sku="default">

       <button class="threedy-3d-btn threedy-embed-btn" style="display: none;">View in 3D</button>

       <button class="threedy-qar-btn threedy-embed-btn" style="display: none;">View in AR</button>

      </div>

      <script type="text/javascript">

      const sku = dataLayer[1]?.product?.sku;

      document.getElementById("threedy-container").setAttribute("data-threedy-web-id", sku);

      </script>

      Note: Replace the value REPLACE_WITH_CLIENT_KEY in the code above with the client key provided by ARitize 3D.

      The value of the variable const sku will change depending on the Magento 2 site theme. Many Magento 2 sites have the SKU in the dataLayer variable which can be used to retrieve the products SKU.

      The line data-threedy-sku="default" can be excluded if the Option ID in the client portal is set to default. For example, if the Option ID for all your products in the client portal are all default, then it can be excluded. For the value of data-threedy-sku replace default with the value of the Option ID in the client portal (https://portal.threedy.ai/).

      Each button is independent of the other, so you can choose to insert both or just one of the buttons.

      You can find these values by selecting Products in the top navigation which then shows the listing of the products. The columns for SKU and Option ID are used by the data attributes data-threedy-web-id and data-threedy-sku.

      For the CSS class 'threedy-embed-btn' it is only needed if you want to match the default ARitize styling (the blue buttons with the icons), otherwise you can remove it and add your own CSS. The other CSS classes and styles are required.

      blobid4.jpg

       

      Step 3:

      Go to your Magento 2 Widget Editor.

      1. Click Content in the left menu.
      2. Click Widgets in the fly-out menu beneath Elements
      3. Click Add Widget button on the top right.

      blobid5.png

       

      Step 4:

      Create a layout update using Widgets. You will need to be familiar with widgets and the product template containers to do this.

      1. Select the Type dropdown under Settings and choose CMS Static Block.
      2. Select the Design Theme dropdown and choose your active design theme.
      3. Click Continue.

      blobid6.png

      4. In the form field Widget Title, set the value to ARitize Buttons

      5. Select All Store Views from the list Assign to Store Views.

      6. Under Layout Updates, click the Add Layout Update button.

      blobid7.png

      7. Under Layout Updates set the widget to display All Product Types.

      8. Select all under the Products radio selection.

      9. Click the Container dropdown and select the container where you wish to insert the ARitize buttons.

      - This container will determine where on the product page the buttons will appear.

      10. When you are done, click the Widget Options tab on the top left.

      blobid8.png

      11. Click the Add Block button and select the ARitize_Button block to insert onto the page.

      12. Click Save on the top right when you are done.

      blobid9.png

       

      That's it!

      As you approve models on the portal, the buttons will automatically populate on your product pages.

       

      Live Experience

      Once the tag is live, two user experiences for the 'View in AR' button differ depending on if the shopper is on a mobile or desktop device:

      1. Mobile Web - When the shopper interacts with the 'View in AR' button, the experience launches via WebAR on the mobile device. Here they can see the model in their space.
      2. Desktop Web - When the shopper interacts with the 'View in AR' button, a QR code is shown. If scanned with a mobile device camera it will launch the mobile WebAR experience.