2

I have a cloud page set up as below. https://i.imgur.com/Fjf2zwf.png

And 2 Data Extensions as below, https://i.imgur.com/ZoS4aCu.png
https://i.imgur.com/cOzdEH3.png

I need to achieve the below, 1) Both the drop down values to be pulled from respective DE. 2) The Category drop down should be populated based on the value selected in Gender drop-down.As below, If I Select MALE, it must pull ONLY Male categories from DE https://i.imgur.com/o9cw3Y1.png

Currently I have achieved this via blend of JS and AMPscript, but is there any efficient way. I know there there is NO REST-API to pull DE rows. Also we can use a simple AMPscript LookupRows, but this will make a page refresh!

Any different approaches are welcome!

Current code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>E-commerce_KT_demo_product Details page</title>
<style type="text/css">
#Gender_div { width: 300px; height: 50px; text-align: right; left: 100px; position: relative; }
#Category_div { width: 300px; height: 50px; text-align: right; left: 100px; position: relative; }
</style>
</head>
<body style="height:auto; overflow:visible;">
<h1 style="color:maroon; text-align:center;">Product Details Page</h1>
<div id="Gender_div">
    %%[
    var @Gender_rows, @Gender_row, @rowCount, @i
    set @Gender_rows = LookupRows("Gender_DE", "default", "1")
    set @rowCount = rowcount(@Gender_rows)
    if @rowCount > 0 then 
        for @i = 1 to @rowCount do
            if @i == 1 then
              output(concat('Select Gender:  ','<select name="Gender" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" ><option value="">Select</option>'))
            endif
            var @Gender
            set @Gender_row = row(@Gender_rows, @i)
            set @Gender = field(@Gender_row,"Gender")
            output(concat('<option value="', @Gender, '">', @Gender, '</option>'))
            if @i == @rowCount then
              output(concat('</select>'))
            endif
        next @i 
    else
     output(concat("<br>companies not found"))
    endif 
    ]%%
</div>
<div id="Category_div">
    <script language="javascript" type="text/javascript">
            function dynamicdropdown(listindex)
            {
                document.getElementById("Category").length = 0;
                switch (listindex)
                {
                    case "Male" :
                        document.getElementById("Category").options[0]=new Option("Male Categories","Male Categories");
                        document.getElementById("Category").options[3]=new Option("Jackets","Jackets");
                        document.getElementById("Category").options[4]=new Option("Jeans","Jeans");
                        document.getElementById("Category").options[5]=new Option("Shorts","Shorts");
                        document.getElementById("Category").options[2]=new Option("Boots","Boots");
                        break;
                    case "Female" :
                        document.getElementById("Category").options[0]=new Option("Female Categories","Female Categories");
                        document.getElementById("Category").options[3]=new Option("Tops","Tops");
                        document.getElementById("Category").options[4]=new Option("Jeggings","Jeggings");
                        document.getElementById("Category").options[5]=new Option("Skirts","Skirts");
                        document.getElementById("Category").options[2]=new Option("Sandles","Sandles");
                        break;
                }
                return true;
            }
       </script>
    %%[
    var @Category_rows, @Category_row, @rowCount, @i
    set @Category_rows = LookupRows("Category", "default", "1")
    set @rowCount = rowcount(@Category_rows)
    if @rowCount > 0 then 
        for @i = 1 to @rowCount do
            if @i == 1 then
              output(concat('Select Category:  ','<select id="Category" name="Category"><option value="">Select Gender first</option></select>'))
            endif
        next @i 
    else
     output(concat("<br/>Categories not found"))
    endif 
    ]%%
</div>
</body>
</html>


  [1]: https://i.stack.imgur.com/qFz1S.png
  [2]: https://i.stack.imgur.com/CYOh0.png
  [3]: https://i.stack.imgur.com/oYMiu.png
  [4]: https://i.stack.imgur.com/rejYR.png
  [5]: https://i.stack.imgur.com/QomHr.png
Improve this question

1 Answer 1

Reset to default
1

You can build a code-resource CloudPage that returns a JSON payload for your AJAX call.

Here's a server-side JavaScript example that reads state and store URL parameter values from the origin page and retrieves data up to 100 rows from a Master_Store data extension. 

<script type="text/javascript" runat="server">

  Platform.Load("core", "1");
  var state = Request.GetQueryStringParameter("state");
  var store = Request.GetQueryStringParameter("store");
  var storeDE = DataExtension.Init("Master_Store");
  var locations = (state) ? storeDE.Rows.Lookup(["state"], [state], 100, "city") : storeDE.Rows.Lookup(["store"], [store], 100);
  locations = locations ? locations : "";
  Write('{"Locations":' + Stringify(locations) + '}');

</script>

There is an undocumented REST endpoint to retrieve data extension rows, but you don't need it if you just build your own code resource page.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.