Accordion Implementation & Reordering Functionality in Purchase History section

Requirement in Purchase History section 

1. Accordion Implementation: Introduce an expandable accordion, allowing users to expand and view all items within a single transaction. 
2. Reordering Functionality: Enable users to reorder by clicking “Add to Cart” directly from the expanded transaction items 

 

Deliverables:

_.extend(RecordViewsActionableView.prototype, {

getContext: _.wrap(RecordViewsActionableView.prototype.getContext, function (fn) {

var context = fn.apply(this, _.toArray(arguments).slice(1));

console.log("context343", context);

console.log("contextthis3334", this);

var x = [

{"id": 1,"name": "item1", "quantity": 10},

{"id": 2,"name": "item2", "quantity": 5}

];

//model.attributes.items

this.model.set('items', x);

this.items = x;

context.items = x;

return context;

})

});

C:UsersJJADMINDesktopMy workExtensionpatchWorkspaceExtrasCleerLineThreadsModulesRecordViews@sco-2018.1.0Templatesrecordviews_actionable.tpl

<tr class="recordviews-actionable" data-item-id="{{itemId}}" data-id="{{id}}" data-record-type="{{recordType}}" data-type="order-item" data-action="navigate">

<td class="recordviews-actionable-title">

<a href="#" data-touchpoint="{{touchpoint}}" data-hashtag="{{detailsURL}}">{{title}}</a>

</td>

{{#each columns}}

<td class="recordviews-actionable-{{type}}" data-name="{{name}}">

{{#if showLabel}}

<span class="recordviews-actionable-label">{{label}}</span>

{{/if}}

{{#if isComposite}}

<span class="recordviews-actionable-composite" data-view="{{compositeKey}}"></span>

{{else}}

<span class="recordviews-actionable-value">{{value}}</span>

{{/if}}

</td>

{{/each}}

<td class="recordviews-actionable-actions">

<p class="recordviews-actionable-label"> {{actionTitle}} </p>

<button class="expand-button" data-action="toggleAccordion" data-item-id="{{itemId}}">Expand</button>

</td>

</tr>

<tr id="accordion-{{itemId}}" class="accordion-content" style="display: none;">

<td colspan="4">

<!-- Item details go here -->

{{#each items}}

<div class="item-details">

<!-- Example item details -->

<p>Item Name: {{name}}</p>

<p>Quantity: {{quantity}}</p>

{{/each}}

<!-- Add more item details as needed -->

</div>

</td>

</tr>

• Extending the Prototype: The _.extend function is used to extend the RecordViewsActionableView.prototype with additional functionality.
• Wrapping getContext: The _.wrap function wraps the original getContext method to add custom logic.
• Calling Original getContext: The original getContext method is called using fn.apply.
• fetch the items details of each order using the search either on the OrderHistoryListView and RecordViewsActionableView
• Setting Items: An array x containing item details is created and set to the model’s items attribute. It is also added to the context and the instance (this.items).
• Returning Context: The modified context is returned.

To add the reorder item functionality, you can indeed use the addLine functionality on the front-end extensibility of the cart component. This will allow users to add items to the cart using the item ID and quantity when they click the corresponding button. Additionally, displaying a quantity box will enable users to specify the quantity they want to add.

• Template Code:
• Added a quantity input box (<input type="number" class="quantity-box" id="quantity-{{itemId}}" min="1" value="1">) to allow users to specify the quantity.
• Added an “Add to Cart” button (<button class="add-to-cart-button" data-action="addToCart" data-item-id="{{itemId}}">Add to Cart</button>) to trigger the add to cart functionality.
• JavaScript Code:
• Imported the Cart.Component to use its addLine method.
• Added a click event handler for the “Add to Cart” button. When clicked, it retrieves the item ID and quantity, and calls the addLine method to add the item to the cart.
• Displays a success or failure message based on the result of the addLine method.

This implementation allows users to reorder items by specifying the quantity and clicking the “Add to Cart” button.