既存widjetの不具合修正をしていただきたいです

コミュニティ

既存widjetの不具合修正をしていただきたいです

トピックス by karen 350 pt 2024年1月26日 18:20 67 PV
【相談内容】

【商品紹介記事2 (ランキング/口コミがスライド) ※要Javascript(テンプレート記事)】の、画像1の四角くかこってある部分ですが、同じwidjetを同じversion内に入れると表示されなくなってしまいます。（widjet1つなら表示されるが、同じwidjetが同じページ内に2つ以上になると、口コミスライドの〇部分が表示されなくなる状態です）こちら修正方法を教えていただきたいです。

【相談したいページ】

https://sb-draft-preview.squadbeyond.com/articles/pYTtXqJprhDbYcnFSg/draft?token=43e02c09b6c4bbd344be6c4bf544af52
画像1-2.png 28 KB 画像ファイル — クリックして見る



コピーダウンロードリンク
karen 2 月, 4 数週間前 2 人 · 7 コメント
7 コメント

widgetマスター

モデレータ
2024年1月29日 13:29

相談ありがとうございます！

確認します！
widgetマスター

モデレータ
2024年1月30日 13:48
既存のWidgetを修正しました！

なので入れ直していただければと思います！

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/RknfStoArheJnbxwPDw/draft?token=26968add7f826d868c1706ad0cb13e85

既存ページの修正を行いたい場合は、Widget内の javascriptを javascript headに移動した上で、下記の複数のスライドに対応のjavascriptに入れ替えていただければと思います。
```
<script>
    var sbReactionSlide = sbReactionSlide || {};
    (function(_) {
        const target = '.js-product-detail';
        _.swiper = function(el, elIndex) {
            const swiperEl = el.querySelector('.swiper');
            const navigationEl = swiperEl.closest('.product__info');
            navigationEl.classList.add(swiper-${+elIndex});
            const swiper = new Swiper(swiperEl, {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 15,
                speed: 750,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: .swiper-${+elIndex} .swiper-pagination,
                    type: 'bullets',
                    clickable: true,
                },
                navigation: {
                    nextEl: .swiper-${+elIndex} .swiper-button-next,
                    prevEl: .swiper-${+elIndex} .swiper-button-prev,
                },
            });
        }
        _.init = function() {
            Array.from(document.querySelectorAll(target)).forEach((el, elIndex) => {
                if (el.classList.contains('EDITABLE')) el.classList.remove('EDITABLE');
                _.swiper(el, elIndex);
            });
        };
    })(sbReactionSlide);
</script>
```
- karen
  
  メンバー
  2024年1月30日 15:02
  
  すみません、うまくいかなかったので質問させてください！
  
  既存ページの修正を行いたい場合は、Widget内の javascriptを javascript headに移動した上で、下記の複数のスライドに対応のjavascriptに入れ替えていただければと思います。
  
  →こちらですが、下記の既存widjetの41行目までの部分を全て削除後、javascript headに提案いただいた内容を貼り付けということで間違いないでしょうか。
- widgetマスター
  
  モデレータ
  2024年1月30日 15:20
  
  説明が分かりにくくすみません🙇‍♀️
  
  こちらになります！
  
  ①WidgetのHTMLのJavaScriptを削除
  
  (同じ種類の複数Widgetある場合はすべて削除)
  
  ②正しいコードをJavaScript headに貼り付け
- karen
  
  メンバー
  2024年1月30日 15:30
  
  ありがとうございます。
  
  手順の通り進めているつもりなのですが何故か成功せずでして…下記のページ確認していただくことは可能でしょうか。
  
  https://sb-draft-preview.squadbeyond.com/articles/pYTtXqJprhDbYcnFSg/draft?token=43e02c09b6c4bbd344be6c4bf544af52
- widgetマスター
  
  モデレータ
  2024年1月30日 15:32
  
  ページの共有ありがとうございます！
  
  拝見したところ、まだコンテンツを含めていないようなので、
  
  新しくWidgetを入れ直していただくのが一番早いかと思います！
  
  よろしくお願いいたします🙌
- karen
  
  メンバー
  2024年1月30日 15:38
  
  解決しました！ありがとうございましたmm

widgetマスター

widgetマスター

karen

widgetマスター

karen

widgetマスター

karen