teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

進捗の追加

2020/12/17 08:24

投稿

kanakana77
kanakana77

スコア1

title CHANGED
File without changes
body CHANGED
@@ -85,7 +85,7 @@
85
85
  恐らく初歩の初歩でつまずいていると思うのですが、解決法をご教示いただけますと有難いです。
86
86
  宜しくお願い致します。
87
87
 
88
- **追記**
88
+ **▼▼▼追記▼▼▼**
89
89
  ```html
90
90
  <div class="itemgroup_sort">
91
91
  <span class="itemgroup_sort-label">並び順</span>
@@ -129,9 +129,55 @@
129
129
 
130
130
  人気順にパロメータが無いことが原因かと思うのですが
131
131
  あっているのかあまり自信がありません。
132
- もしわかる方がいらっしゃったらアドバイス頂けたらありがたいです。。。
133
- よろしくおねがいいたします。
134
132
 
133
+ **▼▼▼追記2▼▼▼**
134
+ 「人気順」のパロメータが存在したので追加しました。人気順を選択したときはきちんと表示されるようになりましたが
135
+ 通常のショップ入り口からアクセスしてくるURLが{% category.url %}なので
136
+ 何の解決にもなりませんでした。
137
+
138
+ ifの条件を増やせばいいのかなと思って書いてみましたが何も変化がないです。
139
+ 解決から遠ざかった感じがします。
140
+
141
+ ```html
142
+ <div class="itemgroup_sort">
143
+ <select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
144
+ <option value="{% category.url %}?sort=price_low">価格が安い順</option>
145
+ <option value="{% category.url %}?sort=price_high">価格が高い順</option>
146
+ <option value="{% category.url %}?sort=priority">人気順</option>
147
+ <option value="{% category.url %}?sort=latest">新着順</option>
148
+ </select>
149
+ </div>
150
+ <script>
151
+ var params = getParameter();
152
+ $("#itemsort-select").val('modalshift');
153
+ if(params['sort']!==""){
154
+ $("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
155
+ }
156
+ else if(params['sort']!==""){
157
+ $("#itemsort-select").val("{% category.url %}");
158
+ }
159
+
160
+ function getParameter(){
161
+ var paramsArray = [];
162
+ var url = location.href;
163
+ parameters = url.split("#");
164
+ if( parameters.length > 1 ) {
165
+ url = parameters[0];
166
+ }
167
+ parameters = url.split("?");
168
+ if( parameters.length > 1 ) {
169
+ var params = parameters[1].split("&amp;");
170
+ for ( i = 0; i < params.length; i++ ) {
171
+ var paramItem = params[i].split("=");
172
+ paramsArray[paramItem[0]] = paramItem[1];
173
+ }
174
+ }
175
+ return paramsArray;
176
+ };
177
+ </script>
178
+ ```
179
+
180
+
135
181
  ### 補足情報(FW/ツールのバージョンなど)
136
182
 
137
183
  ツールはDreamweaverを使用してコードをかいていますが

1

アドバイスをもらって状況が変化したので追記

2020/12/17 08:24

投稿

kanakana77
kanakana77

スコア1

title CHANGED
File without changes
body CHANGED
@@ -85,6 +85,53 @@
85
85
  恐らく初歩の初歩でつまずいていると思うのですが、解決法をご教示いただけますと有難いです。
86
86
  宜しくお願い致します。
87
87
 
88
+ **追記**
89
+ ```html
90
+ <div class="itemgroup_sort">
91
+ <span class="itemgroup_sort-label">並び順</span>
92
+ <select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
93
+ <option value="{% category.url %}?sort=price_low">価格が安い順</option>
94
+ <option value="{% category.url %}?sort=price_high">価格が高い順</option>
95
+ <option value="{% category.url %}">人気順</option>
96
+ <option value="{% category.url %}?sort=latest">新着順</option>
97
+ </select>
98
+ </div>
99
+ <script>
100
+ var params = getParameter();
101
+ $("#itemsort-select").val('modalshift');
102
+ if(params['sort']!==""){
103
+ $("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
104
+ }
105
+
106
+ function getParameter(){
107
+ var paramsArray = [];
108
+ var url = location.href;
109
+ parameters = url.split("#");
110
+ if( parameters.length > 1 ) {
111
+ url = parameters[0];
112
+ }
113
+ parameters = url.split("?");
114
+ if( parameters.length > 1 ) {
115
+ var params = parameters[1].split("&amp;");
116
+ for ( i = 0; i < params.length; i++ ) {
117
+ var paramItem = params[i].split("=");
118
+ paramsArray[paramItem[0]] = paramItem[1];
119
+ }
120
+ }
121
+ return paramsArray;
122
+ };
123
+ </script>
124
+ ```
125
+ 頂いた回答をもとに上記のように修正したところ、遷移先に合わせてプルダウンを変化させることができました!
126
+ ですが、「人気順」を選択したときだけプルダウンの表示が消えてしまうバグが発生しており
127
+ エラーメッセージが下記のように出ています。
128
+ Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
129
+
130
+ 人気順にパロメータが無いことが原因かと思うのですが
131
+ あっているのかあまり自信がありません。
132
+ もしわかる方がいらっしゃったらアドバイス頂けたらありがたいです。。。
133
+ よろしくおねがいいたします。
134
+
88
135
  ### 補足情報(FW/ツールのバージョンなど)
89
136
 
90
137
  ツールはDreamweaverを使用してコードをかいていますが