Q&A
/shop/products/list
で実行されるコードが分からないので何とも
お世話になっております。
javascript、jQuery初心者、ajax自体を触るのは初めてとなります。
現在、ECCUBEの商品一覧（先頭から10件）をajaxで取得したいと考えています。
##現在の環境
現在の環境ですが、以下のようになっており同一ドメインになっています。
【Wordpress】https://xxx.com/
【ECCUBE】https://xxx.com/shop/
・取得したいページ
【ECCUBE】https://xxx.com/shop/products/list
ECCUBEの商品一覧の情報をwordpressのほうにも出力したいと考えています。
下記のコードで商品を1件取得まではいけたのですが、それ以降の商品を取得できずに悩んでいます。
それとも、そもそもの書き方が間違ってて、これで一覧は取得できないものなのでしょうか？
お力添えいただけますと幸いです。
html
1 //出力させたい側のhtml 2 <ul class="Shop_new_item__list"> 3 <li id="product"> 4 <a href="" class="product__url"> 5 <div class="product__thumb"> 6 <img src="" alt=""> 7 </div> 8 <div class="headline"> 9 <p class="product__makerName"> 10 </p> 11 <p class="product__price"> 12 </p> 13 </div> 14 </a> 15 </li> 16 </ul>
javascript
1 document.addEventListener('DOMContentLoaded', function () { 2 var $product = $('#product'); 3 var getPage = function (elm, $el) { 4 $.ajax({ 5 type: 'GET', 6 url: elm, 7 dataType: 'html', 8 success: function (data) { 9 console.log('通信できました。'); 10 var $outHtml = $($.parseHTML(data)); 11 var $ecItemUrl = $outHtml.find('.ec-shelfGrid__item-url').attr('href'); 12 var $ecHeadingTitle = $outHtml.find('.ec-shelfGrid__item-title').eq(0).text(); 13 var $ecThumb = $outHtml.find('.ec-shelfGrid__item-image').eq(0).children('img').attr('src'); 14 var $ecPrice = $outHtml.find('.price02-default').eq(0).text(); 15 $el.find('.product__url').eq(0).attr('href', $ecItemUrl); 16 $el.find('.product__thumb img').eq(0).attr('src', $ecThumb).attr('alt', $ecHeadingTitle); 17 $el.find('.product__makerName').text($ecHeadingTitle); 18 $el.find('.product__price').text($ecPrice); 19 }, 20 error: function () { 21 console('問題がありました。'); 22 $product.remove(); 23 } 24 }); 25 } 26 getPage('https://xxx.com/shop/products/list', $product); 27 });
twig
1##ECCUBE側で実行されるコード 2{% if pagination.totalItemCount > 0 %} 3 <div class="ec-shelfRole"> 4 <ul class="ec-shelfGrid"> 5 {% for Product in pagination %} 6 <li class="ec-shelfGrid__item"> 7 <a href="{{ url('product_detail', {'id': Product.id}) }}" class="ec-shelfGrid__item-url"> 8 <p class="ec-shelfGrid__item-image"> 9 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}" loading="lazy"> 10 </p> 11 <p class="ec-shelfGrid__item-title">{{ Product.name }}</p> 12 {% if Product.description_list %} 13 <p class="ec-shelfGrid__item-title">{{ Product.description_list|raw|nl2br }}</p> 14 {% endif %} 15 <p class="price02-default"> 16 {% if Product.hasProductClass %} 17 {% if Product.getPrice02Min == Product.getPrice02Max %} 18 {{ Product.getPrice02IncTaxMin|price }} 19 {% else %} 20 {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }} 21 {% endif %} 22 {% else %} 23 {{ Product.getPrice02IncTaxMin|price }} 24 {% endif %} 25 </p> 26 </a> 27 28 {% if Product.stock_find %} 29 {% set form = forms[Product.id] %} 30 <form name="form{{ Product.id }}" id="productForm{{ Product.id }}" action="{{ url('product_add_cart', {id:Product.id}) }}" method="post"> 31 <div class="ec-productRole__actions"> 32 {% if form.classcategory_id1 is defined %} 33 <div class="ec-select"> 34 {{ form_widget(form.classcategory_id1) }} 35 {{ form_errors(form.classcategory_id1) }} 36 </div> 37 {% if form.classcategory_id2 is defined %} 38 <div class="ec-select"> 39 {{ form_widget(form.classcategory_id2) }} 40 {{ form_errors(form.classcategory_id2) }} 41 </div> 42 {% endif %} 43 {% endif %} 44 <div class="ec-numberInput"><span>{{ '数量'|trans }}</span> 45 {{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }} 46 {{ form_errors(form.quantity) }} 47 </div> 48 </div> 49 {{ form_rest(form) }} 50 </form> 51 <div class="ec-productRole__btn"> 52 <button type="submit" class="ec-blockBtn--action add-cart" data-cartid="{{ Product.id }}" form="productForm{{ Product.id }}"> 53 {{ 'カートに入れる'|trans }} 54 </button> 55 </div> 56 {% else %} 57 <div class="ec-productRole__btn"> 58 <button type="button" class="ec-blockBtn--action" disabled="disabled"> 59 {{ 'ただいま品切れ中です。'|trans }} 60 </button> 61 </div> 62 {% endif %} 63 </li> 64 {% endfor %} 65 </ul> 66 </div> 67{% endif %}
下がwordpressの現在の状態の画像です
下がECCUBE側の現在の状態の画像です
console.log(data )
で想定のデータ（今回はHTMLぽいですが）は返ってきてるのでしょうか。
それならparseHTML()とかせずに .html(data)でそのまま突っ込めば良いように思います。
ご確認ありがとうござます。
console.log(data)で確認したところ、htmlの内容は返ってきておりました。
ご相談いただきありがとうございました。
諸々書き直してみてテストしてみたいと思います！
あなたの回答
tips
プレビュー
