Picture - Use Vue template for components

grandnode · Sep 10, 2021 · da3b45c · da3b45c
1 parent 2956d8c
commit da3b45c
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/src/Web/Grand.Web/Views/Product/_Pictures.cshtml b/src/Web/Grand.Web/Views/Product/_Pictures.cshtml
@@ -9,9 +9,17 @@
             @if (Model.DefaultPictureZoomEnabled)
             {
                 <gallery-images></gallery-images>
+
+                <script type="text/html" id="picture">
+                    <div>
+                        <img class="image main-image zoom" id="main-product-img-@Model.Id" v-for="(image, i) in images" :src="image.url" :alt="image.alt" 
+                             :title="image.title" :key="i" @@click="index=i">
+                        <vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
+                    </div>
+                </script>
                 <script>
                     Vue.component('gallery-images', {
-                      template: '<div> <template> <img class="image main-image zoom" id="main-product-img-@Model.Id" v-for="(image, i) in images" :src="image.url" :alt="image.alt" :title="image.title" :key="i" @@click="index=i"> <vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow> </template> </div>',
+                      template: '#picture',
                       data() {
                           return {
                               images: [
@@ -68,10 +76,19 @@
                      title="@Model.DefaultPictureModel.Title"
                      onclick="document.querySelector('.thumb-image').click()" />
 
+                <script type="text/html" id="picture">
+                    <div>
+                        <img class="image thumb-image zoom" v-for="(image, i) in images" :src="image.url" :datasrc="image.fullimg" 
+                             :alt="image.alt" :title="image.title" :key="i" @@click="index=i">
+                        <div>
+                            <vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow>
+                        </div>
+                    </div>
+                </script>
                 <gallery-images></gallery-images>
                 <script>
                     Vue.component('gallery-images', {
-                          template: '<div><template> <img class="image thumb-image zoom" v-for="(image, i) in images" :src="image.url" :datasrc="image.fullimg" :alt="image.alt" :title="image.title" :key="i" @@click="index=i"><div><vue-gallery-slideshow :images="images" :index="index" @@close="index=null"></vue-gallery-slideshow></div></template></div>',
+                          template: '#picture',
                           data() {
                               return {
                                     images: [