feat: add 3d model viewer (#164)

Author: Helias

docs/configure-cms.md

@@ -54,7 +54,7 @@ To add the shop in your website selling items and services you have to:
   <br>
   4. **(optional)** install the plugin `myCred` to add **"virtual points"** in your website, this will allow you to define a relation between money and your virtual point, so any user can buy items in the shopt through virtual points and buy virtual points with €/$
 
-![Shop](shop.png)
+![Shop](images/shop.png)
 
 Besides items you can also sell:
 
@@ -72,6 +72,24 @@ Besides items you can also sell:
 
 **Note:** if you want to sell a cumulative item you can use the `SKU itemsend_ITEM-ID_stack`.
 
+### 3D Model Viewer
+
+In any product it is possible to enable/disable the 3D viewer via settings on Inventory -> 3D Viewer.
+
+![3d viewer](images/3d-viewer-option.png)
+
+It currently suports:
+- mounts/pets/companion under itemsend SKU
+- transmog items under transmog-item SKU
+
+Examples:
+
+<img src="images/3d-viewer-example-mount.png" alt="3d viewer mount" width="500"/>
+
+<img src="images/3d-viewer-example-pet.png" alt="3d viewer pet" width="500"/>
+
+<img src="images/3d-viewer-example-transmog.png" alt="3d viewer pet" width="500"/>
+
 ## Troubleshooting
 
 For everything ask help on [Discord](https://discord.gg/gkt4y2x) in the channel `#acore-cms` (section `TOOLS`), you can also tag @Helias for any issue about this CMS.

docs/images/3d-viewer-example-mount.png

@@ -114,4 +114,62 @@ public static function destAccount(): void {
         <?php
     }
 
+    public static function get3dViewer(int $itemId): void {
+
+        global $post;
+        $custom_3d_checkbox = get_post_meta($post->ID, '_custom_3d_checkbox', true);
+
+        if ($custom_3d_checkbox !== 'yes') {
+            return;
+        }
+
+        ?>
+        <script>$ = jQuery;</script>
+        <script src="https://wowgaming.altervista.org/modelviewer/scripts/viewer.min.js"></script>
+        <script type="module">
+            import { generateModels } from "<?= ACORE_URL_PLG . "web/libraries/wow-model-viewer/index.js" ?>";
+
+            function show3dModel(displayId, entity, inventoryType, race=1, gender=0) {
+                let model;
+                if (entity === 'item') {
+                    const character = {
+                        race,
+                        gender,
+                        skin: 0,
+                        face: 0,
+                        hairStyle: 0,
+                        hairColor: 0,
+                        facialStyle: 0,
+                        items: [
+                            [inventoryType,  displayId],
+                        ],
+                    };
+                    model = character;
+                }
+                else if (entity === 'npc') {
+                    model = {
+                        type: 8,
+                        id: displayId,
+                    };
+                }
+
+                const wow3dviewerId = 'acore-3d-viewer-<?= $itemId ?>';
+                const productElementCSSclass = '.woocommerce-product-gallery';
+                document.querySelector(productElementCSSclass).innerHTML = '';
+                document.querySelector(productElementCSSclass).style.backgroundColor='black';
+                document.querySelector(productElementCSSclass).id = wow3dviewerId;
+                generateModels(1, `#${wow3dviewerId}`, model);
+            }
+
+            fetch('https://wowgaming.altervista.org/modelviewer/data/get-displayid.php?type=item&id=<?= $itemId ?>')
+                .then(response => response.text())
+                .then(data => {
+                    const [displayId, entity, inventoryType] = data.split(',');
+                    show3dModel(displayId, entity, inventoryType);
+                });
+        </script>
+
+        <?php
+    }
+
 }

docs/images/3d-viewer-example-pet.png

@@ -74,6 +74,8 @@ public static function before_add_to_cart_button() {
             return;
         }
 
+        FieldElements::get3dViewer($sku->itemId);
+
         $current_user = wp_get_current_user();
 
         if ($current_user) {

docs/images/3d-viewer-example-transmog.png

@@ -0,0 +1,19 @@
+<?php
+
+/* 3D viewer custom fields */
+function add_custom_3d_checkbox_field() {
+    woocommerce_wp_checkbox( array(
+        'id' => '_custom_3d_checkbox',
+        'label' => __('3D Viewer', 'woocommerce'),
+        'description' => __('Check this box to enable the 3D viewer for this product.', 'woocommerce'),
+    ));
+}
+add_action('woocommerce_product_options_inventory_product_data', 'add_custom_3d_checkbox_field');
+
+
+function save_3d_checkbox_field($post_id) {
+    $custom_checkbox = isset($_POST['_custom_3d_checkbox']) ? 'yes' : 'no';
+    update_post_meta($post_id, '_custom_3d_checkbox', $custom_checkbox);
+}
+add_action('woocommerce_process_product_meta', 'save_3d_checkbox_field');
+?>

docs/images/3d-viewer-option.png

@@ -34,6 +34,8 @@ public static function before_add_to_cart_button() {
             return;
         }
 
+        FieldElements::get3dViewer($itemId);
+
         $current_user = wp_get_current_user();
 
         if ($current_user) {